<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['系统基础管理', '续费管理']"
      icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>续费管理</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn" style="width: calc(100% - 220px)">
                <sa-company-tree-car
                  companyTreeId="companyTree"
                  wrapId="content"
                  [isShowCarSort]="false"
                  [isShowCarNum]="true"
                  (companySelected)="companySelected($event)"
                ></sa-company-tree-car>
                <div class="top_module">
                  <span class="module_text">时间类型</span>
                  <select name="" id="" class="module_inp" [(ngModel)]="dateType" (change)="changeDateType()">
                    <option value="1">缴费时间</option>
                    <option value="2">开始时间</option>
                    <option value="3">结束时间</option>
                  </select>
                </div>
                <div class="top_module">
                  <span class="module_text">数据来源</span>
                  <select name="" id="" class="module_inp" [(ngModel)]="dataSourceType">
                    <option value="">全部</option>
                    <option value="1">批量导入</option>
                    <option value="2">随你运小程序</option>
                    <option value="3">平台新增</option>
                    <option value="4">API接口对接</option>
                  </select>
                </div>
                <div class="selectDate top_module">
                  <table-select-date
                    [notInit]="true"
                    [specifyId]="specifyId"
                    (outerTime)="getSelectTableTime($event)"
                    [specifyTime]="specifyTime"
                  ></table-select-date>
                </div>
                <button type="button" class="btn btn-primary" (click)="tableSearch()">查询</button>
                <button type="button" class="btn btn-primary" (click)="showAddRenewal(addRenewalModal)">添加</button>
                <button type="button" class="btn btn-primary" (click)="dataCleaning(dataCleaningModal)">
                  数据清洗
                </button>
                <button type="button" class="btn btn-primary" (click)="showImportModal(weightModal)">批量导入</button>
                <button type="button" class="btn btn-primary" (click)="exportData()">导出</button>
                <button type="button" class="btn btn-primary" (click)="dataRecordPopup(recordPopupModal)">
                  月续费率统计
                </button>
              </div>
              <div class="right top-search">
                <input
                  type="text"
                  [(ngModel)]="searchKey"
                  (change)="tableSearch()"
                  class="search-input"
                  placeholder="车牌号、公司名称、设备ID"
                />
                <span class="top-search-box">
                  <button class="top-search-btn" type="button" (click)="tableSearch()">
                    <i class="fa fa-search"></i>
                  </button>
                </span>
              </div>
            </div>
            <div class="table_scroll">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
              >
                <thead>
                  <tr>
                    <th>车牌号</th>
                    <th>设备ID</th>
                    <th>对接公司</th>
                    <th>
                      缴费时间
                      <span class="sort-icon">
                        <i
                          class="fa fa-caret-left"
                          [ngClass]="{ active: sortTime == 1 && dateType == 1 }"
                          (click)="columnSort(1, 1)"
                        ></i>
                        <i
                          class="fa fa-caret-right"
                          [ngClass]="{ active: sortTime == 2 && dateType == 1 }"
                          (click)="columnSort(2, 1)"
                        ></i>
                      </span>
                    </th>
                    <th>
                      开始时间
                      <span class="sort-icon">
                        <i
                          class="fa fa-caret-left"
                          [ngClass]="{ active: sortTime == 1 && dateType == 2 }"
                          (click)="columnSort(1, 2)"
                        ></i>
                        <i
                          class="fa fa-caret-right"
                          [ngClass]="{ active: sortTime == 2 && dateType == 2 }"
                          (click)="columnSort(2, 2)"
                        ></i>
                      </span>
                    </th>
                    <th>
                      结束时间
                      <span class="sort-icon">
                        <i
                          class="fa fa-caret-left"
                          [ngClass]="{ active: sortTime == 1 && dateType == 3 }"
                          (click)="columnSort(1, 3)"
                        ></i>
                        <i
                          class="fa fa-caret-right"
                          [ngClass]="{ active: sortTime == 2 && dateType == 3 }"
                          (click)="columnSort(2, 3)"
                        ></i>
                      </span>
                    </th>
                    <th>续费时长</th>
                    <th>备注</th>
                    <th>数据来源</th>
                    <th>创建时间</th>
                    <th>创建人</th>
                    <!-- 这里也根据权限 -->
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData" [ngClass]="{ selected: activeSelected === row.id }">
                    <td>{{ row.carNumber }}</td>
                    <td>{{ row.deviceId }}</td>
                    <td>{{ row.companyName }}</td>
                    <td>{{ row.createDate }}</td>
                    <td>{{ row.startTime }}</td>
                    <td>{{ row.endTime }}</td>
                    <td>{{ row.renewalCycle }}个月</td>
                    <td>{{ row.remark }}</td>
                    <td>
                      <span *ngIf="row.dataSource == 1 || row.dataSource == '' || row.dataSource == null">
                        批量导入
                      </span>
                      <span *ngIf="row.dataSource == 2">随你运小程序</span>
                      <span *ngIf="row.dataSource == 3">平台新增</span>
                      <span *ngIf="row.dataSource == 4">API接口对接</span>
                    </td>
                    <td>{{ row.createTime }}</td>
                    <td>{{ row.createName }}</td>
                    <!-- 这里也根据权限 -->
                    <td>
                      <button type="button" (click)="editSource(row, editSourceModal)">编辑</button>
                      <button *ngIf="isShowDelete" type="button" (click)="del_domCode(row)">删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="totalCounts"
                [rows]="pageSize"
                [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>
</div>

<!-- 添加续费记录 -->
<section
  bsModal
  #addRenewalModal="bs-modal"
  class="modal fade addRenewal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeRenewalModal(addRenewalModal)">&times;</button>
        <h4 class="modal-title">添加续费记录</h4>
      </div>
      <div class="modal-body">
        <form
          id="addRenewal"
          class="form-horizontal"
          role="form"
          novalidate="novalidate"
          [saBootstrapValidator]="validatorOptions"
        >
          <div class="row form-horizontal">
            <div class="form-group clearfix">
              <label class="control-label col-sm-2 no-padding-right">
                缴费时间
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix renewalTime">
                  <input
                    class="form-control"
                    name="payDate"
                    id="payDate"
                    autocomplete="off"
                    [(ngModel)]="renewal.payDate"
                    type="text"
                    placeholder="请选择"
                  />
                  <!-- <table-select-date class="test" [notStart]='true' endTimePlaceholder="请选择缴费时间" [isBeforeToday]="true" (outerTime)="datePickerSelected($event)"></table-select-date> -->
                  <!-- 缴费时间的判断input -->
                  <!-- <input class="form-control none" name="payDate" autocomplete="off" type="text" [(ngModel)]='renewal.payDate' placeholder="缴费时间" /> -->
                </div>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="control-label col-sm-2 no-padding-right">项目选择</label>
              <div class="col-sm-4">
                <div class="clearfix">
                  <button
                    type="button"
                    class="btn btn-primary"
                    style="width: 130px"
                    (click)="showProject(projectModal)"
                  >
                    点击选择项目
                  </button>
                </div>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="control-label col-sm-2 no-padding-right">
                已选项目
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <div style="height: 150px; border: 1px solid #ccc; overflow-y: auto; padding: 3px">
                    <span class="carSpan" *ngFor="let car of selectedProject; let i = index">
                      {{ car.text }}
                      <i class="fa fa-times" aria-hidden="true" (click)="deleteSelectProject(car.id, i)"></i>
                    </span>
                  </div>
                  <input class="form-control none" id="projectIds" name="projectIds" autocomplete="off" type="text" />
                </div>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="control-label col-sm-2 no-padding-right">车辆选择</label>
              <div class="col-sm-4">
                <div class="clearfix">
                  <button
                    type="button"
                    class="btn btn-primary"
                    style="width: 130px"
                    (click)="showCarTree(carTreeModal)"
                  >
                    点击选择车辆
                  </button>
                </div>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="control-label col-sm-2 no-padding-right">
                已选车辆
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <div style="height: 150px; border: 1px solid #ccc; overflow-y: auto; padding: 3px">
                    <span class="carSpan" *ngFor="let car of selectedCar; let i = index">
                      {{ car.text }}
                      <i class="fa fa-times" aria-hidden="true" (click)="deleteSelectCar(car.id, i)"></i>
                    </span>
                  </div>
                  <input class="form-control none" id="deviceIds" name="deviceIds" autocomplete="off" type="text" />
                </div>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="control-label col-sm-2 no-padding-right">
                续费时长[月]
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="renewalTime"
                    autocomplete="off"
                    type="text"
                    onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                    [(ngModel)]="renewal.renewalTime"
                    placeholder="续费时长"
                  />
                </div>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="control-label col-sm-2 no-padding-right">备注</label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="sensorAmount"
                    autocomplete="off"
                    type="text"
                    [(ngModel)]="renewal.remark"
                    placeholder="填写备注"
                  />
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="closeRenewalModal(addRenewalModal)">取消</button>
        <button type="button" class="btn btn-primary" (click)="submitModal(addRenewalModal, submitCheckModal, '1')">
          提交
        </button>
      </div>
    </div>
  </div>
</section>
<!-- 添加续费记录 结束 -->

<!-- 选择项目弹框 -->
<section
  bsModal
  #projectModal="bs-modal"
  class="modal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeProjectModal(projectModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">选择项目</h4>
      </div>
      <div class="modal-body">
        <div class="form-horizontal">
          <div class="op_header table-top" style="height: 37px">
            <div class="top-search search_box" style="width: 240px; margin-top: 0" id="searchProjectIpt">
              <input
                type="text"
                id="searchProjectList"
                autocomplete="off"
                (change)="list_project_search()"
                class="search-input"
                placeholder="关键字..."
              />
              <span class="top-search-box">
                <button class="top-search-btn" type="button" (click)="list_project_search()">
                  <i class="fa fa-search"></i>
                </button>
              </span>
              <div id="searchCountProject">
                <span id="findProjectIndex"></span>
                /
                <span id="searchProjectResult"></span>
              </div>
              <i class="fa fa-chevron-up" aria-hidden="true" (click)="preProjectFind()"></i>
              <i class="fa fa-chevron-down" aria-hidden="true" (click)="nextProjectFind()"></i>
            </div>
          </div>
        </div>
        <!-- 车辆树 -->
        <div class="tree_box" style="margin-top: 0; height: 500px; overflow: hidden">
          <div class="col-xs-12" style="padding: 0">
            <div style="font-weight: bold; font-size: 14px; position: absolute">项目列表</div>
            <div
              class="form-group tree_content"
              id="tree_project_content"
              style="height: 500px; overflow-y: auto; overflow-x: hidden"
            >
              <div class="" style="margin-left: 100px">
                <div id="deviceProjectList"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="closeProjectModal(projectModal)">取消</button>
        <button type="button" class="btn btn-primary" (click)="selectProjectSubmit(projectModal)">添加</button>
      </div>
    </div>
  </div>
</section>
<!-- 选择项目 END-->

<!-- 选择车辆弹框 -->
<section
  bsModal
  #carTreeModal="bs-modal"
  class="modal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeCarTreeModal(carTreeModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">选择车辆</h4>
      </div>
      <div class="modal-body">
        <div class="form-horizontal">
          <div class="op_header table-top" style="height: 37px">
            <div class="top-search search_box" style="width: 240px; margin-top: 0" id="searchCarIpt">
              <input
                type="text"
                id="searchKeyList"
                autocomplete="off"
                (change)="list_search()"
                class="search-input"
                placeholder="关键字..."
              />
              <span class="top-search-box">
                <button class="top-search-btn" type="button" (click)="list_search()">
                  <i class="fa fa-search"></i>
                </button>
              </span>
              <div id="searchCountWrap">
                <span id="findIndex"></span>
                /
                <span id="searchResult"></span>
              </div>
              <i class="fa fa-chevron-up" aria-hidden="true" (click)="preFind()"></i>
              <i class="fa fa-chevron-down" aria-hidden="true" (click)="nextFind()"></i>
            </div>
          </div>
        </div>
        <!-- 车辆树 -->
        <div class="tree_box" style="margin-top: 0; height: 500px; overflow: hidden">
          <div class="col-xs-12" style="padding: 0">
            <div style="font-weight: bold; font-size: 14px; position: absolute">车辆列表</div>
            <div
              class="form-group tree_content"
              id="tree_content"
              style="height: 500px; overflow-y: auto; overflow-x: hidden"
            >
              <div class="" style="margin-left: 100px">
                <div id="deviceList"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="closeCarTreeModal(carTreeModal)">取消</button>
        <button type="button" class="btn btn-primary" (click)="selectCarSubmit(carTreeModal)">添加</button>
      </div>
    </div>
  </div>
</section>
<!-- 选择车辆弹框 END-->

<!-- 导入弹框 -->
<div
  bsModal
  #weightModal="bs-modal"
  class="modal fade"
  id="weightModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header" style="position: relative">
        <button type="button" class="close" (click)="cancelUp(weightModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">上传Excel文件</h4>
        <div class="importBtn">
          <button type="button" class="btn btn-primary" (click)="load_module()">下载模板</button>
        </div>
      </div>
      <div class="modal-body">
        <div class="row">
          <form class="form form-inline" role="form">
            <div class="row">
              <div class="col-sm-10" style="padding: 0">
                <div class="clearfix module_line">
                  <button type="button" class="btn btn-primary" style="width: 120px; margin-bottom: 12px">
                    上传模板文件
                    <input
                      type="file"
                      class="up"
                      (change)="fileChange($event.target.files)"
                      name="fileToUpload"
                      (click)="clearFile()"
                      [(ngModel)]="fileUp"
                      type="file"
                      placeholder=""
                    />
                  </button>
                  <br />
                  <span class="row" class="note">注：请先下载模板，采用模板编辑文件后上传 (格式excel)</span>
                </div>
              </div>
            </div>
            <div *ngIf="fileToUpload">
              <label class="control-label col-sm-1"></label>
              <div>
                <ul>
                  <li class="file_list">
                    <i class="fa fa-file-text-o" style="margin-right: 12px"></i>
                    {{ fileToUpload.name }}
                    <i class="fa fa-check-circle green" style="margin-left: 60px"></i>
                  </li>
                </ul>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="cancelUp(weightModal)">取消</button>
        <button type="button" class="btn btn-primary" (click)="submitData(weightModal, submitCheckModal, '2')">
          确认
        </button>
      </div>
    </div>
  </div>
</div>
<!-- 导入弹框 结束 -->

<!-- 数据清洗弹框 -->
<section
  bsModal
  #dataCleaningModal="bs-modal"
  class="modal fade addRenewal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeCleaningModal(dataCleaningModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">数据清洗</h4>
      </div>
      <div class="modal-body">
        <form
          id="dataCleaning"
          class="form-horizontal"
          role="form"
          novalidate="novalidate"
          [saBootstrapValidator]="cleaningOptions"
        >
          <div class="row form-horizontal">
            <div class="form-group s_fix_select2">
              <label class="control-label col-sm-2 no-padding-right">
                所属厂区
                <sup>*</sup>
              </label>
              <div class="col-xs-9">
                <sa-company-tree
                  wrap="html"
                  companyTreeId="companyTree1"
                  [Height]="32"
                  [companyNameValue]="dataCleaningForm.companyName"
                  [companyIdValue]="dataCleaningForm.companyId"
                  (companySelected)="addCompanySelected($event)"
                ></sa-company-tree>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2 no-padding-right">
                开始时间
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="startInstallTime"
                    id="startInstallTime"
                    autocomplete="off"
                    [(ngModel)]="dataCleaningForm.startTime"
                    type="text"
                    placeholder="请选择"
                  />
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2 no-padding-right">
                结束时间
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="installTime"
                    id="installTime"
                    autocomplete="off"
                    [(ngModel)]="dataCleaningForm.endTime"
                    type="text"
                    placeholder="请选择"
                  />
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2 no-padding-right">
                保留条数
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="dataCleanout"
                    [(ngModel)]="dataCleaningForm.dataCleanout"
                    type="text"
                    placeholder="保留条数"
                    autocomplete="street-address"
                  />
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="closeCleaningModal(dataCleaningModal)">取消</button>
        <button type="button" class="btn btn-primary" (click)="submitCleaningModal(dataCleaningModal)">提交</button>
      </div>
    </div>
  </div>
</section>
<!-- 数据清洗弹框 结束 -->

<!-- 提交核对 -->
<div
  bsModal
  #submitCheckModal="bs-modal"
  id="submitCheckModal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
  style="overflow: auto"
>
  <div class="modal-dialog modal-lg" style="width: 1200px">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          (click)="cancelSubmitCheck(submitCheckModal, addRenewalModal)"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">提交核对</h4>
      </div>
      <div class="modal-body" style="padding: 15px">
        <div
          class="page-header clearfix s_table_opreation"
          style="margin-top: 0px; margin-bottom: 15px; padding-bottom: 15px"
        >
          <div class="left page-header-btn">
            <div class="top_module">
              <span class="module_text">提交前状态</span>
              <select name="isSuccess" id="" class="module_inp" [(ngModel)]="isSuccess">
                <option value="">全部</option>
                <option value="1">成功</option>
                <option value="0">失败</option>
              </select>
            </div>
            <button type="button" class="btn btn-primary" (click)="queryCheckTable()">查询</button>
            <button type="button" class="btn btn-primary" (click)="exportCheckData()">导出</button>
          </div>
          <div class="right top-search" style="text-align: right">
            <button type="button" class="btn btn-primary" (click)="batchDelete()">批量删除</button>
          </div>
        </div>
        <div class="table_scroll">
          <table
            class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
          >
            <thead>
              <tr>
                <th>
                  <div class="checkbox" style="margin: 0; left: 5px; text-align: center">
                    <label>
                      <input
                        type="checkbox"
                        class="checkbox style-0"
                        [(ngModel)]="allChecked"
                        (click)="allSelected()"
                      />
                      <span></span>
                    </label>
                  </div>
                </th>
                <th>提交前状态</th>
                <th>车牌号</th>
                <th>设备ID</th>
                <th>对接厂区</th>
                <th>上次服务到期时间</th>
                <th>缴费时间</th>
                <th>续费时长[月]</th>
                <th>备注</th>
                <th>本次服务开始时间</th>
                <th>本次服务到期时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody *ngIf="submitCheckTableData.length != 0">
              <tr
                *ngFor="let row of submitCheckTableData; let i = index"
                [attr.data-index]="i"
                (click)="rowSelected(row, $event, i)"
              >
                <td>
                  <div class="checkbox" style="margin: 0; left: 5px; text-align: center">
                    <label class="checkbox-label">
                      <input
                        type="checkbox"
                        class="checkbox style-0"
                        [(ngModel)]="row.isChecked"
                        (click)="rowSelected(row, $event, i)"
                      />
                      <span class="checkbox-flag"></span>
                    </label>
                  </div>
                </td>
                <td>
                  <span *ngIf="row.isSuccess == 1" style="color: green">成功</span>
                  <span *ngIf="row.isSuccess == 0" style="color: red">失败</span>
                </td>
                <td>{{ row.carNumber }}</td>
                <td>{{ row.deviceId }}</td>
                <td>
                  <span style="width: 150px; word-break: break-word">{{ row.companyName }}</span>
                </td>
                <td>{{ row.firstServiceEndDate }}</td>
                <td>{{ row.renewalDate }}</td>
                <td>{{ row.renewalCycle }}</td>
                <td>{{ row.remark }}</td>
                <td>{{ row.startTime }}</td>
                <td>{{ row.endTime }}</td>
                <td>
                  <button type="button" (click)="editSubmitCheck(row, editSubmitCheckModal)">
                    {{ isUpload == '2' ? '查看' : '编辑' }}
                  </button>
                  <button type="button" (click)="delSubmitCheck(row)">删除</button>
                </td>
              </tr>
            </tbody>
            <tbody
              *ngIf="submitCheckTableData.length == 0"
              style="height: 50px; margin: 0 auto; text-align: center; line-height: 50px"
            >
              暂无查询数据
            </tbody>
          </table>
        </div>
        <div class="table-fix clearfix">
          <paginator
            [totalRecords]="checkTotalCounts"
            [rows]="checkPageSize"
            [currentPage]="checkCurPage - 1"
            (onPageChange)="checkPaginate($event)"
          ></paginator>
          <button type="button" class="btn default refresh_btn" (click)="checkRefresh()">
            <i class="fa fa-refresh"></i>
          </button>
        </div>
      </div>
      <div class="footerNum" style="padding-left: 20px; font-size: 15px">{{ numMessage }}</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="cancelSubmitCheck(submitCheckModal, addRenewalModal)">
          取消
        </button>
        <button type="button" class="btn btn-primary" (click)="submitCheck(submitCheckModal)">提交</button>
      </div>
    </div>
  </div>
</div>
<!-- 提交核对 end-->

<!-- 编辑提交核对 -->
<section
  bsModal
  #editSubmitCheckModal="bs-modal"
  class="modal fade addRenewal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeEditSubmitCheck(editSubmitCheckModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">{{ isUpload == '2' ? '查看' : '编辑' }}</h4>
      </div>
      <div class="modal-body">
        <form
          id="dataCleaning"
          class="form-horizontal"
          role="form"
          novalidate="novalidate"
          [saBootstrapValidator]="cleaningOptions"
        >
          <div class="row form-horizontal">
            <div class="form-group">
              <label class="control-label col-sm-2 no-padding-right">
                车牌号码
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="carNumber"
                    id="carNumber"
                    autocomplete="off"
                    [(ngModel)]="editcheckForm.carNumber"
                    type="text"
                    disabled
                  />
                </div>
              </div>
            </div>
            <div class="form-group s_fix_select2">
              <label class="control-label col-sm-2 no-padding-right">
                对接厂区
                <sup>*</sup>
              </label>
              <div class="col-xs-9">
                <select
                  name="isSuccess"
                  id=""
                  class="dockingListSelect"
                  [(ngModel)]="editcheckForm.companyId"
                  (change)="dockingListChange()"
                >
                  <option value="" *ngFor="let item of DockingList" [value]="item.value">{{ item.key }}</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2 no-padding-right">
                上次服务到期时间
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="firstServiceEndDate"
                    id="firstServiceEndDate"
                    autocomplete="off"
                    [(ngModel)]="editcheckForm.firstServiceEndDate"
                    type="text"
                    disabled
                  />
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2 no-padding-right">
                缴费时间
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <!-- <table-select-date #createDateComp class="test" [notStart]='true' endTimePlaceholder="请选择缴费时间" [isBeforeToday]="true" (outerTime)="dockingPickerSelected($event)"></table-select-date> -->
                  <!-- 缴费时间的判断input -->
                  <input
                    class="form-control"
                    name="renewalDate"
                    id="renewalDate"
                    autocomplete="off"
                    type="text"
                    [(ngModel)]="editcheckForm.renewalDate"
                    placeholder="缴费时间"
                  />
                </div>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="control-label col-sm-2 no-padding-right">续费时长[月]</label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="renewalCycle"
                    autocomplete="off"
                    type="text"
                    onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                    [(ngModel)]="editcheckForm.renewalCycle"
                    placeholder="续费时长"
                    (input)="renewalCycleChange()"
                  />
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2 no-padding-right">
                备注
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <textarea class="form-control" name="remark" id="remark" autocomplete="off"
                    [(ngModel)]="editcheckForm.remark" type="text"></textarea>
                </div>
              </div>
            </div>
            <!-- <div class="form-group">
							<label class="control-label col-sm-2 no-padding-right">本次服务结束时间<sup>*</sup></label>
							<div class="col-sm-9">
								<div class="clearfix">
									<input class="form-control" name="endTime" id="endTime" autocomplete="off" [(ngModel)]='editcheckForm.endTime' type="text"  disabled/>
								</div>
							</div>
						</div> -->
            <div class="form-group">
              <label class="control-label col-sm-2 no-padding-right">
                失败原因
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <textarea
                    class="form-control"
                    name="errorMsg"
                    id="errorMsg"
                    autocomplete="off"
                    [(ngModel)]="editcheckForm.errorMsg"
                    type="text"
                    disabled
                  ></textarea>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer" *ngIf="isUpload != '2'">
        <button type="button" class="btn btn-default" (click)="closeEditSubmitCheck(editSubmitCheckModal)">取消</button>
        <button type="button" class="btn btn-primary" (click)="submitEditSubmitCheck(editSubmitCheckModal)">
          确定
        </button>
      </div>
    </div>
  </div>
</section>
<!-- 编辑提交核对 end-->

<!-- 月续费率统计弹框 -->
<section
  bsModal
  #recordPopupModal="bs-modal"
  class="modal fade addRenewal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closePopupModal(recordPopupModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">月续费率统计导出</h4>
      </div>
      <div class="modal-body">
        <form
          id="recordPopupForm"
          class="form-horizontal"
          role="form"
          novalidate="novalidate"
          [saBootstrapValidator]="recordPopupOptions"
        >
          <div class="row form-horizontal">
            <div class="form-group">
              <label class="control-label col-sm-2 no-padding-right">
                导出维度
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <div class="form_check_box">
                    <div [class]="[checkExportType === '1' ? 'form_check_option active' : 'form_check_option']" (click)="checkOptionChange('1')">按项目</div>
                    <div [class]="[checkExportType === '2' ? 'form_check_option active' : 'form_check_option']" (click)="checkOptionChange('2')">按厂区</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group s_fix_select2">
              <label class="control-label col-sm-2 no-padding-right">
                所选厂区
                <sup>*</sup>
              </label>
              <div class="col-xs-9">
                <sa-company-tree-checkbox
                  wrap="body"
                  inputName="recordCompanyName"
                  [inputApi]="inputApi"
                  [threeState]="true"
                  [isShowChildData]="true"
                  [filterNoChildLevel]="checkExportType === '2'?true:false"
                  [companyValue]="recordPopupForm.companyArrays"
                  companyTreeId="companyTreeRecord"
                  [Height]="32"
                  (companySelected)="addRecordCompanySelected($event)"
                  (click)="companySelectedClick()"
                ></sa-company-tree-checkbox>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2 no-padding-right">
                选择年份
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="yearRecordTime"
                    id="yearRecordTime"
                    autocomplete="off"
                    [(ngModel)]="recordPopupForm.yearRecordTime"
                    type="text"
                    placeholder="请选择"
                  />
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-xs-12" style="text-align: center">
                <button type="button" class="btn btn-primary" (click)="submitPopupModal(recordPopupModal, true)">
                  销售续费率导出
                </button>
              </div>
              <!-- <div class="col-xs-6" style="text-align: center">
                <button type="button" class="btn btn-primary" (click)="submitPopupModal(recordPopupModal, false)">
                  常规续费率导出
                </button>
              </div> -->
            </div>
            <div class="form-group">
              <div class="col-xs-12 explain">
                <p>说明：</p>
                <p>总车辆：这个月之前的所有车辆</p>
                <p>总到期：车辆安装时间小于这个月减12个月的总车辆</p>
                <p>
                  总续费：车辆续费开始时间大于这个月减12个月，小于这个月的已经续费的车辆（续费时间小于等于6个月算0.5辆车，大于等于6个月算1辆车）
                </p>
                <p>总续费率：总续费 / 总到期</p>
                <p>月到期：前一年这个月的新装 + 前一年这个月续费的车辆（续费开始时间）</p>
                <p>月续费：本月有续费记录的车辆（缴费开始时间）</p>
                <p>月累计到期：前一年这个月的新装 + 前一年这个月续费的车辆（续费开始时间）+ 上个月累计到期的数量</p>
                <p>
                  月累计续费：本月有续费记录的车辆（使用缴费开始时间计算并且续费车辆是累计到期中当月未续费的车辆）+
                  上月累计续费的车辆
                </p>
                <p>月累计续费率：月累计续费 / 月累计到期</p>
                <p>月累计续费金额：月累计续费车辆 * 合同配置中的续费单价</p>
              </div>
            </div>
            <!-- <div class="form-group">
							<label class="col-xs-2 control-label">是否对外<sup>*</sup></label>
							<div class="col-xs-10">
								<label class="radio radio-inline">
									<input type="radio" class="radiobox" checked [(ngModel)]='recordPopupForm.isOut' value='1' name="isOut">
									<span>是</span>
								</label>
								<label class="radio radio-inline">
									<input type="radio" class="radiobox" [(ngModel)]='recordPopupForm.isOut' value='0' name="isOut">
									<span>否</span>
								</label>
							</div>
						</div> -->
          </div>
        </form>
      </div>
      <!-- <div class="modal-footer">
				<button type="button" class="btn btn-default" (click)="closePopupModal(recordPopupModal)">取消</button>
				<button type="button" class="btn btn-primary" (click)="submitPopupModal(recordPopupModal)">提交</button>
			</div> -->
    </div>
  </div>
</section>
<!-- 月续费率统计弹框 结束 -->

<!-- 编辑数据来源 -->
<section
  bsModal
  #editSourceModal="bs-modal"
  class="modal fade addRenewal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeEditSourceModal(editSourceModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">编辑数据来源</h4>
      </div>
      <div class="modal-body">
        <div class="row form-horizontal">
          <div class="form-group s_fix_select2">
            <label class="control-label col-sm-2 no-padding-right">
              数据来源
              <sup>*</sup>
            </label>
            <div class="col-xs-9">
              <select
                name=""
                id=""
                class="dockingListSelect"
                [(ngModel)]="dataSource"
              >
                <option value="1">批量导入</option>
                <option value="2">随你运小程序</option>
                <option value="3">平台新增</option>
                <option value="4">API接口对接</option>
              </select>
            </div>
          </div>

          <div class="form-group clearfix">
            <label class="control-label col-sm-2 no-padding-right">缴费时间</label>
            <div class="col-sm-9">
              <div class="clearfix renewalTime">
                <input class="form-control" name="payRenewalDate" id="payRenewalDate" autocomplete="off" [(ngModel)]='createDate' type="text" placeholder="请选择" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="closeEditSourceModal(editSourceModal)">取消</button>
        <button type="button" class="btn btn-primary" (click)="submitEditSourceModal(editSourceModal)">确定</button>
      </div>
    </div>
  </div>
</section>
<!-- 编辑提交核对 end-->

<style>
  .dockingListSelect {
    display: block;
    width: 100%;
    height: 32px;
    line-height: 32px;
    border-color: #ccc;
  }
  .explain p:first-child {
    color: red;
    border-bottom: none;
    padding: 0;
  }
  .explain p {
    border-bottom: 1px dashed #ddd;
    padding: 4px;
  }
</style>
